<template>
    <div>
  <h2>查看(通过或拒绝)</h2><br>
  <table>
  <tr>
      <td>
  <el-form-item label="合同标题：" style="font-size: 20px;float: right;" prop="contractTitle">
          <el-input v-model="form.contractTitle" style="width: 300px;height: 40px;" :disabled="true"
          placeholder="请输入合同标题" clearable />
        </el-form-item>
    
      </td>
      <td>
        <el-form-item label="对方单位" style="font-size: 20px;float: right;" prop="contractTitle">
          <el-input v-model="form.unit" style="width: 300px;height: 40px;" :disabled="true"
          placeholder="请输入对方单位" clearable />
        </el-form-item>
      </td>
    </tr>
    <tr>
      <td>
        <el-form-item label="对方负责人：" style="font-size: 20px;float: right;" prop="contractTitle">
          <el-input v-model="form.personCharge" style="width: 300px;height: 40px;" :disabled="true"
          placeholder="请输入对方负责人" clearable />
        </el-form-item>
      </td>
      <td>
        <el-form-item label="合同类型：" style="font-size: 20px;float: right;" prop="contractTitle">
          <el-input v-model="form.contractType" style="width: 300px;height: 40px;" :disabled="true"
          placeholder="请输入合同类别" clearable />
        </el-form-item>
      </td>
    </tr>
    <tr>
      <td>
        <el-form-item label="签订时间：" style="font-size: 20px;float: right;" prop="contractTitle">
          <el-date-picker v-model="form.dateofSigning" type="date"  :disabled="true"
            placeholder="请选择签订时间" clearable  style="width: 300px;height: 40px;"/>
        </el-form-item>
      </td>
      <td>
        <el-form-item label="经办人：" style="font-size: 20px;float: right;" prop="contractTitle">
          <el-input v-model="form.attn" style="width: 300px;height: 40px;" :disabled="true"
          placeholder="请输入经办人" clearable />
        </el-form-item>
      </td>
    </tr>
    <tr>
      <td>
        <el-form-item label="合同金额：" style="font-size: 20px;float: right;">
          <el-input v-model="form.contractAmount" style="width: 300px;height: 40px;" :disabled="true"
          placeholder="请输入合同金额" clearable />
        </el-form-item>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <el-form-item label="合同标的或项目说明" 
          style="font-size: 20px;width: 970px;height: 100px;float: right;" >
        <el-input v-model="form.contractNote" type="textarea" style="font-size: 20px;width: 970px;height: 100px;" :disabled="true"></el-input>
        </el-form-item>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <el-form-item label="合同主要条款/边更条款" 
          style="font-size: 20px;width: 970px;height: 100px;float: right;">
        <el-input v-model="form.contractTerms" type="textarea" style="font-size: 20px;width: 970px;height: 180px;" :disabled="true"></el-input>
        </el-form-item>
        
      </td>
    </tr>
    <tr >
      <td style="font-size: 20px;">合同文本(附件)：</td>
      <td>
        <el-upload
  v-model:file-list="fileList"
  class="upload-demo"
  action="http://10.223.8.15:8000/hwrite/api/Contract/Upfile"
  multiple
 :disabled="true"
  :limit="30000"
  :on-success="handleSuccess"
>
</el-upload>
        <span>（单个附件最大支持20M，支持：PDF、Word、Excel、Txt格式）</span> 
      </td>
    </tr>

<h1>审批记录</h1>
<el-table :data="ContractApprova" border style="width: 100%">
    <el-table-column prop="approvalResult" label="审批结果" align="center"/>
       <el-table-column prop="approvalNotes" label="备注" align="center">
            <template v-slot="scope">
<span v-if="scope.row.approvalNotes==''">-</span>
            </template>
       </el-table-column>
           <el-table-column prop="createdDate" label="审批时间" align="center">
            <template v-slot="scope">
{{ scope.row.createdDate.replace('T', ' ').substring(0,19) }}
            </template>
           </el-table-column>
               <el-table-column prop="approver" label="审批人" align="center"/>
  </el-table>
</table>
   
 </div>
</template>
  
<script setup lang='ts'>
   import axios  from 'axios';

import { ElMessage, ElMessageBox } from 'element-plus'
 import { ref, reactive, onMounted } from 'vue'; 
  import { useRouter, useRoute } from 'vue-router';
  const tableData=ref([])
  const route = useRoute();
  const router = useRouter();
  onMounted(() => {
    backfill()
    getContractApproval()
  
  })
//审批表
const from=reactive({
    approvalResult:'',
    approvalNotes:'',
    approver:'',
    contractId:'',
    subgrantor:''
})
//显示货主合同审批记录
const ContractApprova:any=ref([])
const getContractApproval = async () => {
  axios.get("/hread/api/ContractRead/GetApprovals?ContractId=" + route.query.ContractId).then(res => { 
    ContractApprova.value=res.data.data
  })
}
  const form=reactive({
      contractId:route.query.ContractId,
      contractTitle:'',
      unit:'',
      personCharge:'',
     contractNumber:'',
      contractType:'',
      dateofSigning:'',
      attn:'',
      contractAmount:'',
      contractNote:'',
      contractTerms:'',
      contractText:'',
      ccontractStatus:0,
      contractClassification:3,//合同分类
 updatedBy:'admin',//更新人
  updatedDate:new Date(),//更新时间
  createdBy:'admin',//创建人
  createdDate:new Date(),//创建时间
  deletedBy:'admin',//删除人
  deletedDate:new Date(),//删除时间
  })
    //用户名称列表
const UserSelectData:any=ref([])

//反填
const backfill = () => {
axios.get('/hread/api/ContractRead/BackfillTshowContract', {
      params: {
        ContractId: route.query.ContractId
      }
    }).then(res => {
    console.log(res.data.data)
      form.contractTitle = res.data.data.contractTitle
      form.unit = res.data.data.unit
      form.personCharge = res.data.data.personCharge
      form.contractNumber = res.data.data.contractNumber
      form.contractType = res.data.data.contractType
      form.dateofSigning = res.data.data.dateofSigning
      form.attn = res.data.data.attn
      form.contractAmount = res.data.data.contractAmount
      form.contractNote = res.data.data.contractNote
      form.contractTerms = res.data.data.contractTerms
      form.contractText = res.data.data.contractText
      form.ccontractStatus = res.data.data.ccontractStatus
      form.contractClassification = res.data.data.contractClassification
      form.updatedBy=res.data.data.updatedBy
      form.updatedDate=res.data.data.updatedDate
     form.createdBy=res.data.data.createdBy
     form.createdDate=res.data.data.createdDate
     form.deletedBy=res.data.data.deletedBy
     form.deletedDate=res.data.data.deletedDate
      localStorage.setItem('contractText2',res.data.data.contractText)
      kk()
  })
  
}
//上传文件
const handleSuccess=(any:any)=>{
console.log(any);
form.contractText=any;
}

const fileList=ref()
const kk=()=>{
const fileLists = ref([
{
      name: localStorage.getItem('contractText2'),
      url:'/hread/wwwroot/file/'+localStorage.getItem('contractText2'),
}
])
fileList.value=fileLists.value
console.log(fileList.value)
}

</script>
  
<style>
  
</style>